<template>
    <div class="box">
        <van-nav-bar title="异常记录" class="navBar" left-arrow @click-left="back()"></van-nav-bar>
        <div class="content">
            
            <div class="desc">
                <h4>异常描述</h4>
                <van-field
                    v-model="state.message"
                    rows="6"
                    autosize
                    type="textarea"
                    placeholder="请输入描述"
                    style="margin-top:10px;"
                />
                <van-uploader v-model="state.file" multiple :max-count="1"  :after-read="afterRead"/>
            </div>
        </div>
        <footer>
            <van-button type="primary" @click="save()" color="rgba(94, 47, 136, 1)">保存</van-button>
            <div class="bar"></div>
        </footer>
    </div>
</template>
<script setup>
    import { Toast } from 'vant'
    import {reactive, ref} from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import {useStore} from 'vuex'
    import {uploadPhoto} from 'api/testing.js'

    const router = useRouter()
    const routes = useRoute()
    const store = useStore()

    const state = reactive({
        id:routes.params.id,
        file:[],
        message:''
    })
    

    //查询是否已经存在，存在则取出异常数据
    let record = store.getters['testing/findFixById',state.id]
    if(record){
        state.id=record.id;
        state.file=record.file;
        state.message=record.message;
    }

    //给异常列表里添加一条，然后返回上一页
    const save = () => {
        Toast.success('保存成功')
        store.commit('testing/addFixList',state);
        console.log(state)
        router.back();
    }

    const back = () => {
        router.back();
    }

    const afterRead = async(file) => {
        console.log("afterRead：")
        console.log(file.file)
        // await uploadPhoto()
    }

</script>
<style lang="scss" scoped>
    .box{
        background: #F1F5F8;
        height: 100vh;
        .navBar{
            background: #fff;
        }
        .content{
            padding:15px;
            .desc{
                height: 350px;
                background: #FFFFFF;
                border-radius: 10px;
                padding:10px;
            }
        }
        
    }
    h4{
        margin: 0;
        text-align: left;
    }
    .uploader,.desc{
        margin:5px;
        padding:10px;
        height: 30vh;
        background: rgb(228, 225, 225);
    }
    footer {
        width: 100%;
        height: 5.625rem /* 90/16 */;
        background: #FFFFFF;
        box-shadow: 0px -10px 32px 8px rgba(0, 0, 0, 0.03);
        border-radius: .9375rem /* 15/16 */ .9375rem /* 15/16 */ 0px 0px;
        position: fixed;
        bottom: 0;
        text-align: center;
        button{
            width: 18.125rem /* 290/16 */;
            height: 2.75rem /* 44/16 */;
            margin-top:1.25rem /* 20/16 */;
            border:none;
            outline: none;
            border-radius: 1.375rem /* 22/16 */;
        }
        .bar{
            width: 8.375rem /* 134/16 */;
            height: .3125rem /* 5/16 */;
            background: #000000;
            border-radius: .15625rem /* 2.5/16 */;
            margin:13px auto 0;
        }
    }
    .van-uploader{
        display: block;
    }
</style>